﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>test</title>
<style>
html{ height:100%;}
body{font-family:Arial, Helvetica, sans-serif;padding:0;font-size:12px;margin:0 auto;color: #333333; background-color:#0c2136;}
.home{height:100%;}

#container{ width:640px; height:100%; margin:auto; position:relative;}

#bottom_nav{ position:absolute; bottom:0px; left:0px; background:url(../test/images/nav_bg.png) repeat-x top;height:auto; width:640px; }

.flex-container a:active,
.icons_nav a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

.icons_nav {padding:0; width:100%; margin: 0;}
.icons_nav .slides li a{ float:left; margin:0 0 0 5%;padding:5% 0 0 0; font-size:15px; color:#FFFFFF; text-align:center; line-height:35px; width:19.5%;}
.icons_nav .paginated {padding:0 0 0 4%; width:94%; margin: 0;}
.icons_nav .paginated .slides li a{ float:left; margin:0 0 0 4%;padding:5% 0 0 0; font-size:15px; color:#FFFFFF; text-align:center; line-height:35px; width:18.5%;}
.icons_nav .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.icons_nav .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

.icons_nav ul.flex-direction-nav a.prev{ position:absolute; bottom:40%; left:10px; text-indent:-200px; overflow:hidden; background:url(../test/images/prev.png) no-repeat center; width:11px; height:21px;}
.icons_nav ul.flex-direction-nav a.next{ position:absolute; bottom:40%; right:10px;text-indent:-200px; overflow:hidden; background:url(../test/images/next.png) no-repeat center; width:11px; height:21px;}

@media screen and (max-width: 640px) {
#container{width:100%; height:100%;}
#pagecontainer{width:100%; height:100%;}
#bottom_nav{ width:100%;}
.icons_nav { padding:0 0 0 0; width:100%;}
.icons_nav .slides li a{ float:left; margin:0 0 0 4.8%;padding:5% 0 0 0; font-size:12px; color:#FFFFFF; text-align:center; line-height:20px; width:19.2%;}
.icons_nav .paginated{ padding:0 0 0 6%; width:94%;}
.icons_nav .paginated .slides li a{ float:left; margin:0 0 0 3.6%;padding:5% 0 0 0; font-size:12px; color:#FFFFFF; text-align:center; line-height:20px; width:17.5%;}
}
</style>
</head>
<body class="home">
<div id="container">
	<div id="bottom_nav">
		<div class="icons_nav">
			<div class="paginated"> <!--Remove this DIV if you want to remove the pagination-->
				<ul class="slides">
					<li>
						<a href="about.html" class="icon"><img src="../test/images/icons/icon_about.png" alt="" title="" border="0" /><span>About</span></a>
						<a href="services.html" class="icon"><img src="../test/images/icons/icon_services.png" alt="" title="" border="0" /><span>Services</span></a>
						<a href="blog.html" class="icon"><img src="../test/images/icons/icon_blog.png" alt="" title="" border="0" /><span>Blog</span></a>
						<a href="portfolio.html" class="icon"><img src="../test/images/icons/icon_portfolio.png" alt="" title="" border="0" /><span>Portfolio</span></a>
					</li>
					<li>
						<a href="photos.html" class="icon"><img src="../test/images/icons/icon_photos.png" alt="" title="" border="0" /><span>Photos</span></a>
						<a href="videos.html" class="icon"><img src="../test/images/icons/icon_video.png" alt="" title="" border="0" /><span>Videos</span></a>
						<a href="clients.html" class="icon"><img src="../test/images/icons/icon_clients.png" alt="" title="" border="0" /><span>Clients</span></a>
						<a href="contact.html" class="icon"><img src="../test/images/icons/icon_contact.png" alt="" title="" border="0" /><span>Contact</span></a>
					</li>
				</ul>
			</div> <!--Remove this DIV if you want to remove the pagination-->
		</div>
	</div>
</div>
<script src="/common/jquery/core.js"></script>
<script src="../test/js/jquery.flexslider.js"></script>
<script>
$('.icons_nav').flexslider(
{
	animation: "slide",
	directionNav: true, <!--Set this to false if you want to remove the arrows navigation of the menu-->
	animationLoop: false,
	controlNav: false, 
	slideshow: false,
	animationDuration: 300
});

window.scrollTo(0, 1);
</script>
</body>
</html>
